<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入的vue.js-->
    <script src="../../js/vue.js"></script>
    <!--引入elementUI的css-->
    <link  type="text/css" rel="stylesheet" href="../../css/index.css">
    <!--引入elementUI的js-->
    <script src="../../js/index.js"></script>
    <!--引入axios.js-->
    <script src="../../js/axios.min.js"></script>
    <style>
        /* 全局样式重置与基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
            background-attachment: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* 登录容器容器样式 */
        .login-container {
            width: 100%;
            max-width: 420px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
            backdrop-filter: blur(8px);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .login-container:hover {
            box-shadow: 0 12px 40px rgba(31, 38, 135, 0.3);
            transform: translateY(-2px);
        }

        /* 登录头部样式 */
        .login-header {
            background: linear-gradient(135deg, #185a9d 0%, #43cea2 100%);
            padding: 30px 20px;
            text-align: center;
        }

        .login-header h2 {
            color: #ffffff;
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 1px;
            margin: 0;
        }

        /* 登录表单样式 */
        .login-form {
            padding: 40px 35px;
        }

        /* 表单项样式 */
        .el-form-item {
            margin-bottom: 28px;
        }

        .el-input {
            height: 48px;
            border-radius: 8px !important;
            border: 1px solid #e5e7eb !important;
            transition: all 0.3s ease;
        }

        .el-input:hover {
            border-color: #43cea2 !important;
            box-shadow: 0 0 0 2px rgba(67, 206, 162, 0.1) !important;
        }

        .el-input:focus-within {
            border-color: #185a9d !important;
            box-shadow: 0 0 0 2px rgba(24, 90, 157, 0.2) !important;
        }

        .el-input__inner {
            height: 48px !important;
            font-size: 15px;
            padding: 0 16px;
            border: none !important;
        }

        .el-icon-user, .el-icon-lock {
            color: #86909c;
            font-size: 18px;
        }

        .el-input__suffix-inner .el-icon {
            color: #86909c;
            font-size: 18px;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .el-input__suffix-inner .el-icon:hover {
            color: #185a9d;
        }

        /* 登录按钮样式 */
        .el-button--primary {
            width: 100%;
            height: 50px;
            border-radius: 8px;
            background: linear-gradient(135deg, #185a9d 0%, #43cea2 100%);
            border: none;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .el-button--primary:hover {
            background: linear-gradient(135deg, #154a82 0%, #37b88f 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(24, 90, 157, 0.2);
        }

        .el-button--primary:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(24, 90, 157, 0.2);
        }

        .el-button--loading .el-icon-loading {
            margin-right: 8px;
            font-size: 18px;
        }

        /* 底部链接样式 */
        .footer-links {
            display: flex;
            justify-content: space-between;
            padding: 0 35px 35px;
            font-size: 14px;
        }

        .footer-links a {
            color: #185a9d;
            text-decoration: none;
            transition: all 0.3s ease;
            padding: 4px 8px;
            border-radius: 4px;
        }

        .footer-links a:hover {
            color: #43cea2;
            background-color: rgba(67, 206, 162, 0.1);
            text-decoration: none;
        }

        /* 消息提示框样式优化 */
        .el-message {
            min-width: 300px !important;
            border-radius: 8px !important;
            padding: 16px 20px !important;
        }

        .el-message__content {
            font-size: 15px !important;
        }
    </style>
</head>
<body>
<!-- 优化后的登录表单容器 -->
<div id="app" class="login-container">
    <div class="login-header">
        <h2>欢迎登录</h2>
    </div>
    <el-form :model="loginForm" ref="form" class="login-form" :rules="loginRules">
        <el-form-item prop="userName">
            <el-input
                    v-model="loginForm.userName"
                    placeholder="请输入用户名"
                    prefix-icon="el-icon-user"
                    @keyup.enter.native="handleLogin">
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input
                    v-model="loginForm.password"
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                    show-password
                    @keyup.enter.native="handleLogin">
            </el-input>
        </el-form-item>
        <el-button
                type="primary"
                @click="handleLogin"
                :loading="loading">
            登录
        </el-button>
    </el-form>

    <div class="footer-links">
        <a href="#" @click.prevent="handleForgotPassword">忘记密码?</a>
        <a href="#" @click.prevent="handleRegister">注册账号</a>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loginForm: {
                    userName: '',
                    password: '',
                },
                loading: false,  // 加载状态
                // 新增表单验证规则，提升用户体验
                loginRules: {
                    userName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 20, message: '用户名长度需在3-20个字符之间', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 32, message: '密码长度需在6-32个字符之间', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleLogin() {
                // 先进行表单验证
                this.$refs.form.validate((isValid) => {
                    if (isValid) {
                        this.loading = true;  // 显示加载动画
                        const _this = this;

                        // 使用axios发送登录请求（保留原请求地址）
                        axios.get('/vegetablemarketexpress/user/login?userName=' +
                            encodeURIComponent(this.loginForm.userName) +
                            "&password=" + encodeURIComponent(this.loginForm.password))
                            .then(response => {
                                this.loading = false;  // 隐藏加载动画
                                if (response.data.code == 200) {
                                    _this.$message({
                                        message: '登录成功，即将跳转到首页',
                                        type: 'success',
                                        duration: 1500// 设置持续时间
                                    });
                                    // 延迟跳转，让用户看到成功提示
                                    setTimeout(() => {
                                        window.location.href = '/vegetablemarketexpress/html/back/index.html';
                                    }, 500);// 延迟0.5秒
                                } else {
                                    _this.$message.error(response.data.message || '用户名或者密码错误');
                                }
                            })
                            .catch(error => {
                                this.loading = false;  // 隐藏加载动画
                                console.error('请求错误:', error);
                                _this.$message.error('登录请求异常，请检查网络或联系管理员');
                            });
                    }
                });
            },
            // 新增忘记密码处理
            handleForgotPassword() {
                this.$message.info('即将跳转到忘记密码页面');
                window.location.href = '/vegetablemarketexpress/html/back/forgetPassword.html';// 跳转到忘记密码页面

            },
            // 新增注册处理
            handleRegister() {
                this.$message.info('即将跳转到注册页面');
                window.location.href = '/vegetablemarketexpress/html/back/register.html';
                return;

            }
        }
    });
</script>
</body>
</html>